<template>
  <transition name="topicForm">
    <div>
      <el-dialog
        v-if="showTopicForm"
        :title="topicTitle"
        class="topic-form-component"
        :visible.sync="showTopicForm"
        width="100%"
        @close="closeTopic()"
      >
        <el-table
          ref="formInfo"
          highlight-current-row
          :data="formItem"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="ID"
            label="ID"
          />
          <el-table-column
            prop="GATHER_SNO"
            label="采编流水号"
          />
          <el-table-column
            prop="ORDER_DATE"
            label="采编日期"
          />
          <el-table-column
            prop="MEETING_ID"
            label="股东大会ID"
          />
          <el-table-column
            prop="INTERNAL_MEETING_ID"
            label="公司部股东大会ID"
          />
          <el-table-column
            prop="SEC_CODE"
            label="证券代码"
          />
          <el-table-column
            prop="SEC_ABBR"
            label="证券简称"
          />
          <el-table-column
            prop="MEETING_NAME"
            label="股东大会名称"
          />
          <el-table-column
            prop="TOPIC_NO"
            label="议案号"
          />
          <el-table-column
            prop="TOPIC_NAME"
            label="议案名称"
          />
          <el-table-column
            prop="IS_MAIN_TOPIC"
            label="是否为主议案"
          />
          <el-table-column
            prop="TOPIC_TYPE"
            label="议案类型"
          />
          <el-table-column
            prop="MUST_SELECT_NUM"
            label="累积投票应选数"
          />
          <el-table-column
            prop="IS_CASH_DIVIDEND"
            label="是否涉及现金分红"
          />
          <el-table-column
            prop="IS_MAJOR"
            label="是否涉及重大事项"
          />
          <el-table-column
            prop="A_CODE"
            label="A股代码"
          />
          <el-table-column
            prop="B_CODE"
            label="B股代码"
          />
          <el-table-column
            prop="PRIORITY_CODE"
            label="优先股代码"
          />
          <el-table-column
            prop="RECOVERY_PRIORITY_CODE"
            label="恢复表决权的优先股代码"
          />
          <el-table-column
            prop="TRADEMARKET"
            label="交易市场"
          />
          <el-table-column
            prop="IS_VALID"
            label="是否有效"
          />
          <el-table-column
            prop="CUMULATIVE_VOTE_TYPE"
            label="累积投票类型"
          />
          <el-table-column
            prop="SPECIAL_CODE"
            label="议案适合的特别表决权代码"
          />
          <el-table-column
            prop="SPECIAL_CODE_TYPE"
            label="特别表决权代码类型"
          />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click.native.prevent="editingTopicInfo(scope.row)"
              >编辑</el-button>
              <el-button
                type="primary"
                size="small"
                @click.native.prevent="deleteTopicInfo(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 编辑议案 -->
      <topic-content-component
        v-if="showTopicContent"
        ref="topicContentComponent"
        :topic-title="topicTitle"
        :item-info="selectTopicInfo"
        @updateForm="updateForm"
      />
    </div>
  </transition>
</template>

<script>
import TopicContentComponent from '@/components/editing/topicContent'

export default {
  name: 'TopicFormComponent',
  components: { TopicContentComponent },
  props: {
    formTitle: {
      type: String,
      default: '议案'
    }

  },
  data() {
    return {
      formItem: [],
      topicTitle: '',
      selectTopicInfo: '',
      showTopicContent: false,
      showTopicForm: false
    }
  },
  methods: {
    getTopicInfo(row) {
      console.log(row)
      const that = this
      this.formItem = []
      const GATHER_SNO = row
      const data = {
        GATHER_SNO
      }
      that.$store.dispatch('editing/getTopicInfo', data).then(res => {
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            that.formItem.push(
              { ID: res.data[i]['ID'],
                GATHER_SNO: res.data[i]['GATHER_SNO'],
                ORDER_DATE: res.data[i]['ORDER_DATE'],
                MEETING_ID: res.data[i]['MEETING_ID'],
                INTERNAL_MEETING_ID: res.data[i]['INTERNAL_MEETING_ID'],
                SEC_CODE: res.data[i]['SEC_CODE'],
                SEC_ABBR: res.data[i]['SEC_ABBR'],
                MEETING_NAME: res.data[i]['MEETING_NAME'],
                TOPIC_NO: res.data[i]['TOPIC_NO'],
                TOPIC_NAME: res.data[i]['TOPIC_NAME'],
                IS_MAIN_TOPIC: String(res.data[i]['IS_MAIN_TOPIC']),
                TOPIC_TYPE: res.data[i]['TOPIC_TYPE'],
                MUST_SELECT_NUM: res.data[i]['MUST_SELECT_NUM'],
                IS_CASH_DIVIDEND: String(res.data[i]['IS_CASH_DIVIDEND']),
                IS_MAJOR: String(res.data[i]['IS_MAJOR']),
                A_CODE: res.data[i]['A_CODE'],
                B_CODE: res.data[i]['B_CODE'],
                PRIORITY_CODE: res.data[i]['PRIORITY_CODE'],
                RECOVERY_PRIORITY_CODE: res.data[i]['RECOVERY_PRIORITY_CODE'],
                TRADEMARKET: res.data[i]['TRADEMARKET'],
                IS_VALID: String(res.data[i]['IS_VALID']),
                CUMULATIVE_VOTE_TYPE: res.data[i]['CUMULATIVE_VOTE_TYPE'],
                SPECIAL_CODE: res.data[i]['SPECIAL_CODE'],
                SPECIAL_CODE_TYPE: res.data[i]['SPECIAL_CODE_TYPE']
              })
          }
        }
      })
      this.showTopicForm = true
      // this.$nextTick(() => {
      //   this.$refs['topicFormComponent'].showTopicForm = true
      // })
    },
    editingTopicInfo(row) {
      this.topicTitle = row['TOPIC_NAME']
      console.log(this.topicTitle)
      this.selectTopicInfo = row
      console.log(this.selectTopicInfo)
      this.showTopicContent = true
      this.$nextTick(() => {
        this.$refs['topicContentComponent'].showTopicContent = true
      })
    },
    confirmTopicInfo(row) {
      const that = this
      const ID = row['ID']
      const data = {
        ID
      }
      this.$confirm('此操作将变更改条股东大会提案的确认状态，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$store.dispatch('editing/confirmTopicInfo', data).then(res => {
          if (res.data === true) {
            this.$message({
              type: 'success',
              message: '确认成功！'
            })
          }
          this.getTopicInfo(row['GATHER_SNO'])
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        })
      })
    },
    deleteTopicInfo(row) {
      const that = this
      const ID = row['ID']
      const data = {
        ID
      }
      this.$confirm('此操作将逻辑删除该股东大会提案，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$store.dispatch('editing/deleteTopicInfo', data).then(res => {
          if (res.data === true) {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          }
          this.getTopicInfo(row['GATHER_SNO'])
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 更新表单
    updateForm(data) {
      console.log('this data: ' + data)
      this.getTopicInfo(data)
    },

    // 关闭弹框
    closeTopic(flag) {
      this.showTopicContent = false
      console.log('close topic 2')
      this.$emit('closeTopic', true)
    }
  }
}
</script>

<style>

</style>
